<template>
	<u-popup v-model="visiable" mode="left" width="100%">
		<div class="mask" v-show="isMask" @click="emptyClick"></div>
		<u-navbar :is-back="true" title="日常监测" class="navbar" :custom-back="back">
			<view class="navbar-right flex" slot="right">
				<u-icon class="add" name="plus" size="42" color="#fff" @click="addPopHandle"></u-icon>
				<div class="add-pop" v-show="isAddPop">
					<div class="add-item" @click="addGroup">添加分类</div>
					<div class="add-item" @click="addSubject({id: 0})">添加专题</div>
				</div>
			</view>
		</u-navbar>
		
		<div class="main">
			<div class="all flex">
				<div class="all-text flex" @click="selectSubject()">
					<u-icon name="grid" size="44" color="#999" style="margin-right: 10rpx;"></u-icon>
					<span style="flex: 1;">全部专题</span>
				</div>
				<u-icon name="setting" size="50" color="#999" @click="globalSetting"></u-icon>
			</div>
			
			<div class="list">
				<div class="item" v-for="(item,index) in list" :key="item.id">
					<div class="parent flex" :class="item.type==0 && 'type'">
						<div class="l flex">
							<u-icon name="arrow-right" class="arrow" size="32" color="#333" v-if="!item.toggle && item.type==0" @click="toggle(index)"></u-icon>
							<u-icon name="arrow-down" class="arrow" size="32" color="#333" v-if="item.toggle && item.type==0" @click="toggle(index)"></u-icon>
							<span class="title" @click="selectSubject(item)">{{item.title}}</span>
						</div>
						<div class="r">
							<u-icon name="more-dot-fill" class="more" color="#666" size="28" @click="subrowHandel(item)"></u-icon>
							<div class="add-pop" v-show="item.is_open">
								<div class="add-item" @click="editGroup(item)" v-if="item.type==0">编辑</div>
								<div class="add-item" @click="addSubject(item)" v-if="item.type==0">添加专题</div>
								<div class="add-item" @click="editSubject(item)" v-if="item.type==1">编辑专题</div>
								<div class="add-item" @click="delSubject(item)">删除</div>
							</div>
						</div>
					</div>
					<div class="children" v-show="item.toggle">
						<div v-if="item.children && item.children.length>0">
							<div class="subitem flex" v-for="subitem in item.children" :key="subitem.id">
								<span class="title" @click="selectSubject(subitem)">{{subitem.title}}</span>
								<div class="r">
									<u-icon name="more-dot-fill" class="more" color="#666" size="28" @click="subrowHandel(subitem)"></u-icon>
									<div class="add-pop" v-show="subitem.is_open">
										<div class="add-item" @click="editSubject(subitem)">编辑专题</div>
										<div class="add-item" @click="delSubject(subitem)">删除</div>
									</div>
								</div>
							</div>
						</div>
						<div class="subitem flex" v-else>
							<span class="title nodata">该分类下暂无专题</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<u-modal v-model="isTypePop" :title="!!editGroupData.id?'编辑分类':'添加分类'" :show-cancel-button="true" ref="typeModal" :async-close="true" @confirm="groupSubmit" @cancel="groupCancel">
			<view class="slot-content modal-content">
				<u-input v-model="typeName" type="text" :border="true" placeholder="请输入" />
			</view>
		</u-modal>
		
		<u-modal v-model="isDel" title="删除" :title-style="{fontWeight: 'bold'}" :content="delText" @confirm="delConfirm" ref="uModal" :show-cancel-button="true" :async-close="true"></u-modal>
		<u-toast ref="uToast" />
	</u-popup>
</template>
<script>
import { mapState } from "vuex";
import { subjectList, addGroup, editGroup, delGroup, delSubject } from "@/api/subject.js";

export default {
	props: {
		visiable: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			list: [],
			isMask: false,
			isAddPop: false,
			isTypePop: false,
			typeName: "新分类",
			editGroupData: {},
			delText: "",
			isDel: false,
			delData: {}
		};
	},
	watch: {
		isRefreshSubjectsList() {
			this.getList();
		}
	},
	computed: {
		...mapState(['isRefreshSubjectsList']),
	},
	methods: {
		back() {
			this.$parent.isSubjects = false;
			this.$parent.isNavbar = true;
			uni.showTabBar();
			
			this.isAddPop = false;
			this.isMask = false;
			this.list.map(item=>{
				item.is_open=false;
				if(item.children){
					item.children.map(subitem=>subitem.is_open=false)
				}
			});
		},
		getList() {
			subjectList().then(({data})=>{
				uni.hideLoading();
				this.list = data;
				this.list.map(item=>{item.toggle = false});
			});
		},
		toggle(index) {
			this.$set(this.list, index, {...this.list[index], toggle: !this.list[index].toggle});
		},
		async selectSubject(row) {
			this.$store.state.filterParams = {};
			this.$store.state.subjects = !row ? [] : [row];
			this.$store.state.listParams = {
				order_by: 3
			};
			this.back();
			uni.showLoading({title: "加载中"});
			await this.$parent.switchSubject();
			await this.$parent.getFilterList();
			this.$store.commit("isRefreshAllListHandle", new Date().getTime());
			this.$store.commit("isRefreshImgListHandle", new Date().getTime());
			this.$store.commit("isRefreshVideoListHandle", new Date().getTime());
		},
		emptyClick() {
			this.isAddPop = false;
			this.isMask = false;
			this.list.map(item=>{
				item.is_open=false;
				if(item.children){
					item.children.map(subitem=>subitem.is_open=false)
				}
			});
		},
		addPopHandle() {
			this.isAddPop = true;
			this.isMask = true;
		},
		addGroup() {
			this.editGroupData = {};
			this.isTypePop = true;
			this.isAddPop = false;
			this.isMask = false;
		},
		groupSubmit() {
			if(!this.typeName.length){
				this.$refs.uToast.show({
					title: "分类名称不能为空",
					type: "error",
				});
				this.$refs.typeModal.clearLoading();
			}else{
				if(!this.editGroupData.id){
					addGroup({ title: this.typeName, pid: 0 }).then(({code}) => {
						if (code == 200) {
							this.$refs.typeModal.clearLoading();
							this.isTypePop = false;
							this.$refs.uToast.show({
								title: "添加成功",
								type: "success",
							});
							this.getList();
						}
					});
				}else{
					editGroup({ title: this.typeName, pid: this.editGroupData.pid, id: this.editGroupData.id }).then(({code}) => {
						if (code == 200) {
							this.$refs.typeModal.clearLoading();
							this.isTypePop = false;
							this.$refs.uToast.show({
								title: "保存成功",
								type: "success",
							});
							this.getList();
						}
					});
				}
			}
		},
		groupCancel() {
			this.typeName = "新分类";
		},
		addSubject(row) {
			this.isAddPop = false;
			this.isMask = false;
			row.is_open = false;
			uni.navigateTo({
				url: "/pages/newSubject/newSubject?pid="+row.id
			});
		},
		editSubject(row) {
			this.isAddPop = false;
			this.isMask = false;
			row.is_open = false;
			uni.navigateTo({
				url: `/pages/newSubject/newSubject?pid=${row.pid}&id=${row.id}`
			});
		},
		subrowHandel(row) {
			this.list.map(item=>{
				item.is_open=false;
				if(item.children){
					item.children.map(subitem=>subitem.is_open=false)
				}
			});
			this.isMask = true;
			row.is_open = !row.is_open;
		},
		editGroup(row) {
			this.typeName = row.title;
			this.editGroupData = row;
			this.isTypePop = true;
			this.isAddPop = false;
			this.isMask = false;
		},
		delSubject(row) {
			this.isAddPop = false;
			this.isMask = false;
			this.delData = row;
			this.isDel = true;
			if(row.type == 0){
				this.delText = "是否删除这个分类";
			}else{
				this.delText = "是否删除这个专题";
			}
		},
		delConfirm() {
			if(this.delData.type == 0){
				delGroup({id: this.delData.id}).then(({code})=>{
					this.$refs.uModal.clearLoading();
					if(code == 200){
						this.isDel = false;
						this.getList();
					}
				});
			}else{
				delSubject({id: this.delData.id}).then(({code})=>{
					this.$refs.uModal.clearLoading();
					if(code == 200){
						this.isDel = false;
						this.getList();
					}
				});
			}
		},
		globalSetting() {
			uni.navigateTo({
				url: "/pages/globalSetting/globalSetting"
			});
		}
	},
}
</script>

<style lang="scss" scoped>
.page{
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	overflow-y: auto;
}
.navbar{
	display: flex;
	justify-content: flex-end;
	.navbar-right{
		cursor: pointer;
		margin-right: 20rpx;
		position: relative;
		z-index: 100;
		.add-pop{
			position: absolute;
			z-index: 1;
			right: 10rpx;
			top: 56rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #fff;
			padding: 12rpx 0;
			border-radius: 6rpx;
		}
		.add-item{
			cursor: pointer;
			padding: 6rpx 16rpx;
			width: 140rpx;
			font-size: 34rpx;
			text-align: center;
		}
	}
	.add{
		color: #fff;
		background-color: #1E62FC;
		padding: 5rpx;
		border-radius: 50%;
	}
}
.mask{
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: transparent;
}
.top{
	justify-content: center;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 80rpx;
	top: 0;
	left: 0;
	.back{
		position: absolute;
		z-index: 1;
		left: 10rpx;
		top: 20rpx;
	}
	.title{
		margin-top: 20rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
}
.all{
	padding: 20rpx;
	align-items: center;
	justify-content: space-between;
	border-bottom: 10rpx solid #F2F3F7;
	.all-text{
		width: 100%;
		font-size: 38rpx;
		align-items: center;
	}
}
.list{
	.item{
		.parent{
			height: 80rpx;
			border-bottom: 1rpx solid #F2F3F7;
			align-items: center;
			padding: 0;
			justify-content: space-between;
			.l{
				flex: 1;
				margin-right: 20rpx;
			}
			.arrow{
				padding: 0 20rpx;
			}
			.r{
				position: relative;
			}
			.title{
				padding-left: 20rpx;
			}
		}
		.type{
			.title{
				padding-left: 0;
			}
		}
		.add-pop{
			position: absolute;
			z-index: 100;
			right: 20rpx;
			top: 50rpx;
			background-color: #333;
			color: #fff;
			border-radius: 6rpx;
			padding: 12rpx 0;
		}
		.add-item{
			cursor: pointer;
			padding: 6rpx 16rpx;
			width: 140rpx;
			font-size: 34rpx;
			text-align: center;
		}
	}
	.more{
		padding: 10rpx 20rpx;
	}
	.subitem{
		height: 80rpx;
		align-items: center;
		padding-left: 60rpx;
		.r{
			position: relative;
			z-index: 1;
		}
	}
	.title{
		cursor: pointer;
		flex: 1;
		font-size: 36rpx;
		line-height: 36rpx;
	}
}
.modal-content{
	padding: 30rpx;
}
.nodata{
	color: #999;
}
</style>